const relatedProductsRendered = document.querySelectorAll('.column-card-list.related-products');
function relatedProductsInit() {
addRelatedProductCards()
}
function addRelatedProductCards() {
relatedProductsRendered.forEach(relatedProductEl => {
const relatedProductContainer = relatedProductEl.querySelector('.column-card-list.related-products .cards');
console.log(relatedProductContainer,'container')
const endpoint = relatedProductEl.dataset.ajaxLoad
const relatedProductsJSON = fetch(endpoint).then(res => res.json());
relatedProductsJSON.then(data => {
// Determine whether to use enhanced loading
const loadButton = relatedProductEl.querySelector('.load-more');
if (data.hideLoadButton) {
loadButton.classList.add("hide");
data.cards.forEach(card => {
// Check if premium flag exists to add additional markup
if (card.premium) {
relatedProductContainer.innerHTML +=
``;
} else {
relatedProductContainer.innerHTML +=
``;
}
})
// Add load more button and initialize with first 4 available cards
} else {
var initialCards = data.cards.slice(0, 4);
var viewCount = initialCards.length;
var productCount = data.cards.length;
loadButton.innerHTML += `You've viewed ${viewCount} of ${productCount}`;
initialCards.forEach(card => {
if (card.premium) {
relatedProductContainer.innerHTML +=
``;
} else {
relatedProductContainer.innerHTML +=
``;
}
})
let loadMoreButton = relatedProductEl.querySelector('.column-card-list.related-products .load-more button');
// Load more cards on click
loadMoreButton.addEventListener("click", function() {
if (viewCount < productCount) {
let loadMoreCards = data.cards.slice(viewCount, viewCount + 4);
loadMoreCards.forEach(card => {
if (card.premium) {
relatedProductContainer.innerHTML +=
``;
} else {
relatedProductContainer.innerHTML +=
``;
}
})
viewCount = (relatedProductContainer.childNodes.length);
let viewedText = relatedProductEl.querySelector('.column-card-list.related-products .load-more span');
viewedText.innerText = `You've viewed ${viewCount} of ${productCount}`
loadMoreButton.blur();
}
});
}
})
})
}
if (relatedProductsRendered.length > 0) relatedProductsInit();
Premium